<template>
  <div>
    <table>
      <thead>
        <th>商品ID</th>
        <th>类型</th>
        <th>票名</th>
        <th>票价</th>
        <th>销量</th>
        <th>图片</th>
        <th>操作</th>
      </thead>
      <tbody v-for="(s,i) in sl.data" :key="i">
        <td>{{s.lid}}</td>
        <td>{{s.family_id==10?'门票':s.family_id==20?'导游':'跟团游'}}</td>
        <td>{{s.title}}</td>
        <td>¥{{s.price}}</td>
        <td>{{s.spec}}</td>
        <td>{{s.mp_pic}}</td> 
        <td>
          <button>修改</button>
        </td>

      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    props:['sl']
  }
</script>

<style lang="scss" scoped>
table{
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0aa1ed;
  text-align: center;
  th,td{
  border: 1px solid #0aa1ed;
  padding: 10px 5px;
  }
button{
  background-color: #0aa1ed;
  border:  1px solid #0aa1ed;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}
}
</style>